<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        预览图文会议
                    </div>
                    <div class="publicTable toLongTable">
                        <div class="main-returns">
                            <i class="el-icon-arrow-left" @click="returns()"></i>
                            <span @click="returns()">返回</span>
                        </div>
                        <div class="phones teletexts">
                            <div class="main-phone">
                                <div class="main-phone-top">
                                    <i class="el-icon-arrow-left"></i>
                                    <span>会议内容</span>
                                </div>
                                <div class="main-title">
                                    <div class="main-titles">
                                        <div class="main-titless">
                                            <span>{{dataDetails.title}}</span>
                                            <div class="phone-text">
                                                <img src="./images/jifeng_icon.png" alt=""> 最高可获
                                                <span>{{Number(dataDetails.read_score) + Number(dataDetails.surveys_score)}}积分</span>
                                            </div>
                                            <div class="phone-text">
                                                <img src="./images/shijian_icon.png" alt=""> 会议时间：{{dataDetails.begin_time}} 至 {{dataDetails.end_time}}
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="phone-con">
                                    <div class="phone-cons" v-html="dataDetails.content">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import teletext from "@/api/teletext";

export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      id: this.$route.query.id,
      data: "teletextConference",
      dataDetails: ""
    };
  },
  methods: {
    returns() {
      history.go(-1);
    },
    getDetails() {
      const options = {};
      teletext.getDetails(options, this.id).then(res => {
        if (res.code == 1) {
          this.dataDetails = res.data;
        }
      });
    }
  },
  mounted() {
    this.getDetails();
  }
};
</script>

<style lang='less'>
.phones {
  background: #f9f9f9;
  padding-top: 20px;
  padding-bottom: 20px;
}
.teletexts {
  .main-phone {
    width: 375px;
    background: #fff;
    margin: 20px auto;
    .main-phone-top {
      position: relative;
      background: url("./images/bar_bg3.png");
      i {
        position: absolute;
        left: 20px;
        top: 16px;
        font-weight: bold;
        color: #fff;
      }
      span {
        color: #fff;
        font-weight: bold;
      }
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      text-align: center;
    }
    .main-title {
      padding-left: 20px;
      height: 110px;
      background: url("./images/bar_bg2.png") 0 0 no-repeat;
      .main-titles {
        font-size: 18px;
        color: #101010;
        font-weight: bold;
        position: relative;
        .main-titless {
          width: 345px;
          height: 105px;
          background: #fff;
          box-shadow: 0px 1px 3px 0px rgba(193, 221, 255, 1);
          border-radius: 5px;
          position: absolute;
          top: 30px;
          left: 0px;
          padding-top: 10px;
          span {
            padding-left: 10px;
          }
        }
      }
      .phone-text {
        font-size: 12px;
        color: #505050;
        margin-top: 10px;
        span {
          color: #ff6f29;
        }
      }
    }
    .phone-con {
      padding: 50px 20px 20px;
      min-height: 400px;
      .phone-cons-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
        color: #101010;
      }
      .phone-cons {
        font-size: 16px;
        color: #101010;
      }
    }
  }
}
</style>
